<template>
	<view class="edit-information">
		<view class="edit-information-contents">
			<view class="information-contents">
				<view class="edit-uploading-image">
					<view class="uploading" @click="uploadingChange">
						<image src="@/static/uploading.png" v-if="!getPersonImage" mode=""></image>
						<text v-if="!getPersonImage">上传头像</text>
						<image v-else class="radio-image" :src="getPersonImage" mode=""></image>
					</view>
					<view class="person-name">
						<text>昵称</text>
						<input type="text" placeholder="温柔的长颈鹿" v-model="pseronWrite" />
					</view>
					<view class="person-wechat-bind">
						<text>绑定微信</text>
						<text>点击前去绑定微信</text>
					</view>
					<view class="person-button">
						<button @click="surePersonChange">保存信息</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { postHttpsRequset, urlImage } from '@/public-ts-file/request';
	// 

	const getPersonImage = ref()
	const avar = ref()
	const uploadingChange = () => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				uni.uploadFile({
					url: 'https://ddzj.hihink.com/api/index/uploadimgs',
					filePath: res.tempFilePaths[0],
					success: (res) => {
						console.log(res)
						const JsonParse = JSON.parse(res.data)
						if (!getPersonImage.value) {
							avar.value = JsonParse.data
							getPersonImage.value = urlImage + JsonParse.data
						}
					}
				})
			}
		})
	}

	const editPhone = () => {
		uni.navigateTo({
			url: '/pages/index/editphone'
		})
	}

	const pseronWrite = ref()
	const surePersonChange = () => {
		const parms = {
			path: '/user/changeinfo',
			methods: 'POST',
			data: {
				name: pseronWrite.value,
				img: avar.value
			}
		}
		postHttpsRequset(parms).then(async res => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			if (res.code == 200) {
				setTimeout(() => {
					uni.navigateBack({ delta: 1 })
				}, 800)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.edit-information {
		.edit-information-contents {
			.information-contents {
				.edit-uploading-image {
					.uploading {
						display: flex;
						align-items: center;

						image {
							width: 100rpx;
							height: 100rpx;
						}

						text {
							margin-left: 10rpx;
							font-size: 28rpx;
						}
					}

					.person-name {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 20rpx;
						margin-top: 40rpx;

						text {
							font-size: 28rpx;
						}

						input {
							text-align: right;
							font-size: 26rpx;
						}
					}

					.person-phone {
						margin-bottom: 20rpx;
						margin: 40rpx 0;

						.person-phone-text-box {
							display: flex;
							align-items: center;
							justify-content: space-between;

							>text {
								font-size: 28rpx;
							}

							.person-text {
								text {
									font-size: 26rpx;
									color: #999999;

									&:nth-last-child(1) {
										color: #3377FE;
										margin-left: 8rpx;
									}
								}
							}
						}
					}

					.person-wechat-bind {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 50rpx;
						text {
							font-size: 28rpx;

							&:nth-last-child(1) {
								color: #999;
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}
	}

	.person-button {
		margin-top: 70rpx;

		button {
			border-radius: 1000rpx;
			background: #3377FE;
			color: white;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.radio-image {
		border-radius: 1000rpx;
	}
</style>